<template>
  <el-card class="box-card">
    <itable
    :table="tconfig.tableConfig"
    :tableData="tconfig.tableData"
    :page-bean="tconfig.pageBean"
    @pageChange="pageChange"
    @handleInfo="handleInfo"
    @handleDel="handleDel"
    >
      <template #searchBox>
        <Eform
          :model="form"
          :elem="fromData"
          :submit="true"
          :reset="true"
          :button="false"
          okIcon="Search"
          btnSize="default"
          submitText="搜索"
          @onSuccess="onSuccess"
          @onReset="onReset"
          >
        </Eform>
      </template>

      <template #headerbtn>
        <el-button type="primary" plain @click="clickadd" icon="Download">导出</el-button>
      </template>
    </itable>
  </el-card>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import { PageBean } from "@/utils/page-bean";
import itable from '@/components/table/table.vue'
import Eform from '@/components/eform/index.vue';

const tconfig = reactive({
  tableConfig: {} as {loading:boolean,[propName:string]:any},
  tableData: [] as any[],
  pageBean: new PageBean(10, 1, 0),
})

// 分页
const pageChange = () => {}

let form = reactive({
  deviceName:'',
  factoryName:''
})
let fromData = reactive([
  {
    label: "题干内容",
    prop: "deviceName",
    clearable: true,
  },
  {
    label: "是否出场",
    prop: "factoryName",
    multiple:true,
    element:'select',
    labelWidth:'120',
    clearable: true,
    option:[
      {label: '全部', value: 0},
      {label: '未出场', value:1},
      {label: '已出场', value: 2},
    ]
  }
])

// 重置
const onReset = () => {
  console.log('77')
}
// 搜索
const onSuccess = (form) => {
  // console.log(form)
}
// 导出
const clickadd = () => {}

// 编辑
const handleInfo = (a, b, id) => {}
// 删除
const handleDel = (a, b, id) => {}

// 初始化表格
const initTable = () => {
  tconfig.tableConfig = {
    loading: false,
    hasSelect: false,
    hasIndex: false,
    hasOperation: true,
    hasSearch: true,
    hasPage: false,
    headerShowBtn:true,
    tr: [
      {
        label: "题目编号",
        prop: "name",
      },
      {
        label: "题干内容",
        prop: "phone",
      },
      {
        label: "题型",
        prop: "visitor",
      },
      {
        label: "选项",
        prop: "type",
      }
    ],
    operation:{
      label:'操作',
      data:[
        { label:'编辑', type:'', icon:'Search', Fun:'handleInfo', id: 0 },
        { label:'删除', type:'danger', icon:'Search', Fun:'handleDel', id: 1 },
      ]
    }
  }
}
initTable()
</script>

<style lang='scss' scoped>

</style>
